<template>
  <div class="main">
    <div class="headBox">
      <el-row>
        <div class="suo">
          <el-col :span="20" >
            <el-input v-model="input" class="w-50 m-2"  placeholder="搜索求助信息"  size="large">
              <template #suffix>
                <el-button @click="getInput" type="warning" round>搜索</el-button>
              </template>
            </el-input>

          </el-col>
        </div>
        <el-col :span="13"></el-col>
        <el-col :span="5">
          <el-button round class="upbotton" @click="toApply">我要发布</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="topbox">
      <div v-for="item in currentPageData" :key="item.pid" class="main-el" @click="getPage(item.pid)">
        <el-card :body-style="{ padding: '0px',width:'400px' }">
          <img class="detailImg"
               :src="item.pimg"
               @click="getPage(item.pid)"/>

          <div style="padding: 14px" @click="getPage(item.pid)">
            <span class="ptitle">{{ item.ptitle }}</span>
            <div class="bottom">

              <span class="psub">{{ item.psubhead }}</span>
            </div>
          </div>
        </el-card>

      </div>

    </div>
  </div>

  <!--  分页组件-->
  <div class="ye">
  <el-pagination
      v-model="currentPage"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalData.length"
      @current-change="handleCurrentChange">
  </el-pagination>
  </div>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "PetList",
  data() {
    return {
      petList: [],
      input: '',
      //分页
      tableData: [], // 总数据
      totalData: [], // 总数据
      currentPage: 1, // 当前页码
      pageSize: 3, // 每页显示的条数

    }
  },

  computed: {
    // 根据当前页面和每页显示的条数，计算分页后的数据
    currentPageData() {
      const {totalData, currentPage, pageSize} = this;
      const start = (currentPage - 1) * pageSize;
      const end = start + pageSize;
      totalData.map
      return totalData.slice(start, end);
    },
  },


  methods: {
    /*点击进入*/
    getPage(pid) {
      this.$router.push('/front/petDetail/' + pid);
    },
    // 切换页码时的回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
    },

    /*模糊搜索*/
    getInput() {
      doThis.doGet("/pet/list", {ptitle: this.input}).then(res => {
        console.log(res)
        this.petList = res.data
        this.totalPage = this.petList.length

      })
    },
    toApply() {
      this.$checkLogin()
      let user = JSON.parse(localStorage.getItem("user"))
      if (user !== null && user.isreal === 2) {
        this.$router.push("/front/addPet")
      } else {
        ElMessage.error('实名后才可以发布')
      }

    }
  },

  mounted() {
    doThis.doGet("/pet/list", null).then(res => {
      console.log(res)
      /* this.petList = res.data*/
      this.tableData = res.data
      this.totalData = res.data
      /* this.totalPage = Math.ceil(this.petList.length / this.pageSize);
       this.currentPage = 1;*/

    })
  }
}


</script>

<style scoped>
.main {
  margin: 0 auto;
  width: 1200px;
}

.main-el {
  width: 250px;
  padding-left: 100px;
  margin-top: 30px;
}

.detailImg {
  width: 300px;
  height: 250px;
}

.topbox {
  width: 1200px;
  display: flex;
  flex-wrap: wrap;
  margin-top: -50px;

}

.sou {
  margin-left: 30px;
}
.suo{

  margin-bottom: 30px;
  margin-left: 30px;
  padding-top: 20px;

}
.ptitle{
  font-size: 18px;
  margin: 5px;
  padding: 10px;
}
.psub{
  font-size: 14px;
  color: rgba(116, 114, 114, 0.68);
  margin: 5px;
  padding: 10px;
}
.bottom{
  color: #868484;
  height: 20px;
  width: 200px;
  overflow: hidden;
  text-overflow:ellipsis;
}

.headBox {
}
  .upbotton{

    margin-left: 0;
    margin-top: 0;
  }
.ye {
  margin-top: 15px;
  margin-left: 30px;
}
</style>